<template>
  <div>
    <div class="header" :style="indent" @click="toogle">
      <span>{{ isShow ? "-" : "+" }}</span>
      <span>{{ title }}</span>
    </div>
    <main v-if="isShow">
      <tree-com
        v-for="(item, index) in list"
        :key="index"
        :title="item.name"
        :list="item.children"
        :depth="depth + 1"
      ></tree-com>
    </main>
  </div>
</template>

<script>
export default {
  name: "tree-com", // 通过组件的自身的name名来实现组件的递归调用
  props: {
    title: {
      type: String,
      default: "名称"
    },
    list: {
      type: Array
    },
    depth: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      isShow: false
    };
  },
  computed: {
    indent() {
      return `transform: translate(${this.depth * 20}px)`;
    }
  },
  methods: {
    toogle() {
      this.isShow = !this.isShow;
      console.log("页面名称"+this.title)
    }
  }
};
</script>

<style lang="scss" scoped>
header {
  width: 100%;
  height: 50px;
  background-color: salmon;
  text-align: center;
  line-height: 50px;
}
</style>
